<template>
    <view class="form-wrap">
        <u-form :model="formData" ref="uForm" :border-bottom="false" :label-width="180" label-align="right">
            <u-form-item label="编号：" prop="serial" :border-bottom="false">
                <FormItemText v-model="formData.serial" class="form-wrap_item" />
            </u-form-item>
            <u-form-item label="说明：" prop="description" :border-bottom="false">
                <FormItemText v-model="formData.description" class="form-wrap_item" />
            </u-form-item>
            <u-form-item label="拍摄时间：" prop="time" :border-bottom="false">
                <FormItemDateTime v-model="formData.time" class="form-wrap_item" placeholder="请选择 拍摄时间" />
            </u-form-item>
            <u-form-item label="拍摄方向：" prop="direction" :border-bottom="false">
                <FormItemSelect v-model="formData.direction" :list="DIRECTION_LIST" />
            </u-form-item>
            <u-form-item label="拍摄人：" prop="person" :border-bottom="false">
                <FormItemText v-model="formData.person" class="form-wrap_item" />
            </u-form-item>
            <u-form-item label="审核人：" prop="applyPerson" :border-bottom="false">
                <FormItemText v-model="formData.applyPerson" class="form-wrap_item" />
            </u-form-item>
            <u-form-item label="制作人：" prop="creator" :border-bottom="false">
                <FormItemText v-model="formData.creator" class="form-wrap_item" />
            </u-form-item>
            <u-form-item label="制作时间：" prop="editTime" :border-bottom="false">
                <FormItemDateTime v-model="formData.editTime" class="form-wrap_item" placeholder="请选择 制作时间" />
            </u-form-item>
            <u-form-item label="录音：" prop="studioUrlList" :border-bottom="false">
                <FileChoose :value="videoList2" :config="fileChooseConfig" @on-upload="handleOnUpload"
                    @on-remove="handleOnRemove" />
            </u-form-item>
        </u-form>
    </view>
</template>

<script>
import FormItemText from '@/pagesH5/components/Form/formItemText.vue'
import FormItemDateTime from '@/pagesH5/components/Form/formItemDateTime.vue'
import FormItemSelect from '@/pagesH5/components/Form/formItemSelect.vue'
import FileChoose from '@/uni_modules/file-choose/components/file-choose/file-choose.vue'
import { DIRECTION_LIST } from '@/const/archives/video.js'
export default {
    components: { FormItemText, FormItemDateTime, FormItemSelect, FileChoose },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            DIRECTION_LIST,
            fileChooseConfig: {
                size: 20,
                limit: 99,
                title: "",
                headers: this.headers,
                formData: {},
                automatic: false,
                fileMediatype: 'file',
                mediaTypeFileType: 'mp3,wav,m4a,amr,flac'
            }
        }
    },
    computed: {
        formData: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('change', val)
            }
        },
        videoList2: {
            get() {
				
        		const studioUrlList = this.formData.studio ? JSON.parse(this.formData.studio) : []
                const list = studioUrlList.map(url => {
                    let fileName = url.match(/\/([^/]+)$/)[1];
                    return {
                        url: url,
                        type: 'audio',
                        name: fileName
                    }
                })
                return list || []
            },
            set(val) {
                this.$emit('change', {
                    ...this.formData,
                    studio: JSON.stringify(val)
                })
            }
        }
    },
    methods: {
        handleOnUpload(file) {
            let list = this.videoList2;
            list.push(file.url)
            this.videoList2 = list
        },
        handleOnRemove(fileList, index) {
            let newFileList = fileList
            this.videoList2 = [...newFileList]
        },
    }
}
</script>